<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>骡窝窝-旅游攻略</title>
    <link rel="stylesheet" href="/css/navbar.css">
    <link rel="stylesheet" href="/css/index_content.css">
	<link rel="stylesheet" type="text/css" href="/css/font/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="/js/bootstrap/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="/js/jquery-ui-1.13.1/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/css/ending.css"/>
	<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	<link href="/js/froala_editor/css/froala_editor.min.css" rel="stylesheet" type="text/css">
	<link href="/js/bootstrap/bootstrap.css"></li>
	<script src="/js/jquery.js" type="text/javascript"></script>
	<script src="/js/bootstrap/bootstrap.min.js"></script>
</head>
<body>

<div th:replace="/common/navbar :: navbar(2)"></div>


<div class="local_con">
    <!--用户id-->
    <div id="userId" style="display: none" th:text="${session.user?.getId()}"></div>
    <!--文章id-->
    <div id="startEgyId" style="display: none" th:text="${strategy?.id}"></div>
    <!--作者id-->
    <div id="author_id" style="display: none" th:text="${strategy?.user?.id}"></div>

    <!--左边start-->
    <div class="local_con_left">
        <!--顶部标题-->
        <div class="local_con_left_sousuo" th:text="${strategy?.title}" >

        </div>

        <!--浏览信息、创建时间等-->
        <div class="time_info">
            <span>旅游攻略<span th:text="${strategy?.writeTime}"></span></span>
            <span>阅读<span th:text="${strategy?.watch}"></span></span>
        </div>


        <div class="local_con_left_author">

            <!--作者图片-->
            <div class="local_con_left_author_img">
                <img th:src="${strategy?.user.headimg}">
            </div>
            <!--作者具体信息-->
            <div>
                <div th:text="${strategy?.user.username}"></div>
                <div th:text="${strategy?.user.motto}"></div>
            </div>
            <!--作者连接-->
            <div>
                <i class="iconfont icon-icon-test"></i>
                <a href="javascript:;">TA的窝</a>
            </div>
        </div>

        <!--内容-->
        <div class="local_con_left_content">
            <!--旅游攻略内容-->
            <div class="froala-element not-msie f-basic" style="border: none;" th:utext="${strategy?.content}"></div>
            <div><i class="iconfont icon-end"></i></div>
            <!--输入评论框Start-->
            <div class="pl_input">
                <div>本文著作权归驴窝窝 所有任何形式转载请联系作者 ©2022 驴窝窝</div>
                <div class="pl_input_sr" id="pl_input_sr">
                    <div>
                        <div class="wb_img"><i class="iconfont icon-txxg"></i></div>
                        <div class="wb_txt">
                            <textarea id="pl_input" rows="5" cols="20" name="pl_input" placeholder="输入你的评论"></textarea>
                        </div>
                    </div>
                    <div><input type="button" value="评论" id="addComment"></div>
                </div>
            </div>
            <!--输入评论框End-->
        </div>

        <!--评论infoshow-->
        <div class="pl_showinf">
			<div class="pl_showinf_total">评论 (<span th:text="${commentList?.size()}"></span>)</div>
			<!--文章评论-->
            <div class="pl_showinf_text" th:each="comment:${commentList}">
                <div class="pl_showinf_text_img">
                    <img th:src="${comment?.user.headimg}">
                </div>
                <div class="pl_showinf_text_info">
                    <div th:text="${comment?.user.username}"></div>
                    <div th:text="${comment?.time}"></div>
                    <div style="margin-bottom: 30px;" th:text="${comment?.content}"></div>
                </div>
            </div>

        </div>

	</div>
	<!--右边start-->
	<div class="local_con_right">
		<div>
			<div style="margin-top:4.8px;"><i class="iconfont icon-biji" style="font-size:22px;"></i><a style="color: black;text-decoration: none;" href="#pl_input_sr">评论</a>
			</div>
			<div id="update" ><i class="iconfont icon-bianjimoban"></i>编辑</div>
			<div id="delete" ><i class="iconfont icon-shanchu"></i>删除</div>
		</div>
		<span>本周热卖</span>
		<!--右边每一个热卖Start-->
		<div th:each="hotsell:${hotsells}">
			<img th:src="${hotsell?.phone}" class="local_con_right_div_img"/>
			<div class="local_con_right_div_content">
				<div th:text="${hotsell?.title}"></div>
				<div th:text="'￥'+${hotsell?.price}"></div>
			</div>
		</div>
		<!--右边每一个热卖-->
	</div>
	<!--右边end-->

	<!--警告删除的模态框-->
	<div class="modal fade" tabindex="-1" role="dialog" id="deleteArticle_modal">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-body">
	        <h4>确定是否删除该文章</h4>
	      </div>
	      <div class="modal-footer" style="border: none;">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-danger" id="deleteArticle">确认</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<!--bootstrap的模态框。主要用来弹出提示的。调用	$('#myModal').modal();//利用bootstrap的javascript方式直接调用模态框-->
	<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
			<div class="modal-dialog" role="document">
			  <div class="modal-content">
				<div class="modal-header" style="border: none;">
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body" style="border: none;">
				  <p style="font-size: 16px;">{{myModal}}</p>
				</div>
				<div class="modal-footer" style="border: none;">
				  <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
				</div>
			  </div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

</div>



<!--主div的end-->
<div th:replace="/common/ending :: end"></div>

<script>
    $(function () {
        //添加评论方法
        $("#addComment").click(function () {
            //step1:准备数据
                //用户id
                let uid=$("#userId").text();
                let artId=$("#startEgyId").text();
                let content=$("#pl_input").val();
                window.location.href="/insertComment?uid="+uid+"&artId="+artId+"&content="+content+"&type=0";
        });

        //当登录用户不是此文章的作者时隐藏删除和编辑按钮
       let author_id=$("#author_id").text();
       let uid=$("#userId").text();
       if(author_id!=uid){
           $("#update").hide();
           $("#delete").hide();
       }

       //点击删除
        //1.调用确认删除按钮
        $("#delete").click(function () {
            $('#deleteArticle_modal').modal();
        });
        //2.发送请求
       $("#deleteArticle").click(function () {
           let id=$("#startEgyId").text();
            window.location.href="/deleteStrategy?id="+id;
       });
       //3.点击编辑按钮
       $("#update").click(function () {
           let id=$("#startEgyId").text();
            window.location.href="/pushStartEgy?id="+id;
       });
    })
</script>

</body>
</html>
